<template>
    <div>
        <pagination :length="tableData.length" :pagination="pagination" float="right"></pagination>
        <el-table
            ref="table"
            :data="tableData.slice((pagination.currpage - 1) * pagination.pagesize, pagination.currpage * pagination.pagesize)"
            tooltip-effect="dark"
            v-loading="loading"
            :header-cell-style="getRowClass"
        >
            <el-table-column prop="productModelNumber" :label="$t('m.label.productModelNumber')">
                <template slot-scope="scope">
                    <el-link
                        :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModelNumber"
                    >{{scope.row.productModelNumber}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="Britain" label="Britain"></el-table-column>
            <el-table-column prop="Germany" label="Germany"></el-table-column>
            <el-table-column prop="France" label="France"></el-table-column>
            <el-table-column prop="Italy" label="Italy"></el-table-column>
            <el-table-column prop="Spain" label="Spain"></el-table-column>
            <el-table-column prop="Japan" label="Japan"></el-table-column>
            <el-table-column prop="America" label="America"></el-table-column>
            <el-table-column prop="Canada" label="Canada"></el-table-column>
            <el-table-column prop="Australia" label="Australia"></el-table-column>
        </el-table>
        <pagination :length="tableData.length" :pagination="pagination" float="right"></pagination>
        <scrollTable ref="scrollTable"></scrollTable>
    </div>
</template>
<script>
import pagination from "@/components/pagination";
import scrollTable from "@/components/ScrollTable";
import { findAllProduct } from "@/api/system/subscription";
const ERR_OK = 200;
export default {
    data() {
        return {
            tableData: [],
            UserCountryProductRelVo: [],
            loading: true,
            pagination: {
                pagesize: 20,
                currpage: 1
            }
        };
    },
    filters: {},
    created() {
        this.getfindProduct();
    },
    methods: {
        // 所有列表
        getfindProduct(id) {
            this.loading = true;
            findAllProduct().then(res => {
                this.loading = false;
                this.filtersData(res.data.data);
                this.$refs.scrollTable.scrollShow(this.$refs.table);
            });
        },
        filtersData(data) {
            let map = {},
                tableData = [];
            data.forEach(item => {
                if (!map[item.productModelNumber]) {
                    tableData.push(item);
                    map[item.productModelNumber] = item;
                } else {
                    tableData.forEach(el => {
                        if (item.productModelNumber === el.productModelNumber) {
                            if (el[item.countryName]) {
                                el[item.countryName] +=
                                    item.userName && item.userName !== "0"
                                        ? "," + item.userDisplayName
                                        : "";
                            } else {
                                el[item.countryName] =
                                    item.userName && item.userName !== "0"
                                        ? item.userDisplayName
                                        : "";
                            }
                        }
                    });
                }
            });
            this.tableData = tableData;
        },
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        pagination,
        scrollTable
    }
};
</script>

<style lang="less" scoped>
.el-tag {
    margin: 0 3px 0 0;
}
</style>